<template>
  <div class="mapcen Bold">
    <div class="map ">
      <img src="@/assets/img/home/datasea/wenzhou.png" width="689" height="603" usemap="#Map" border="0" style="width: 43.0625rem; height: 37.6875rem;" />
      <map name="Map" id="Map" class="cursor">
        <!-- 永嘉县 -->
        <div class="yongjia map_icon" @click="switchmap(1, '永嘉县', '330324000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[3] }}
            <span>位</span>
          </p>
          <area
            shape="poly"
            coords="360,8,390,22,405,34,429,27,469,5,494,5,502,24,513,43,553,44,556,103,534,111,526,124,523,159,488,232,483,235,464,226,432,229,416,230,397,188,382,181,345,182,346,168,352,143,311,103,339,25"
          />
        </div>
        <!-- 乐清市 -->

        <div class="yueqing map_icon" @click="switchmap(2, '乐清市', '330382000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[8] }}
            <span>位</span>
          </p>
          <area
            shape="poly"
            coords="574,50,573,102,565,120,556,117,543,124,540,153,499,246,521,256,546,254,563,259,586,213,634,158,602,147,599,126,635,130,663,99,685,88,661,62,639,30"
          />
        </div>
        <!-- 鹿城区 -->
        <div class="lucheng map_icon" @click="switchmap(3, '鹿城区', '330302000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[0] }}
            <span>位</span>
          </p>
          <area shape="poly" coords="330,185,336,206,333,215,356,228,389,235,414,245,438,256,458,256,467,244,455,240,430,241,418,243,407,233,403,215,384,199" />
        </div>
        <!-- 瓯海区 -->
        <div class="ouhai map_icon" @click="switchmap(4, '瓯海区', '330304000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[9] }}
            <span>位</span>
          </p>
          <area shape="poly" coords="324,218,317,248,358,261,389,275,422,295,437,308,470,302,476,280,465,268,443,275,412,262,394,249,362,246" />
        </div>
        <!-- 龙湾区 -->
        <div class="longwan map_icon" @click="switchmap(5, '龙湾区', '330303000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[1] }}
            <span>位</span>
          </p>
          <area shape="poly" coords="482,247,496,264,539,266,561,276,559,294,508,317,499,338,489,324,484,304,491,284,479,261" />
        </div>
        <!-- 洞头区 -->
        <div class="dongtou map_icon" @click="switchmap(6, '洞头区', '330305000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[2] }}
            <span>位</span>
          </p>
          <area shape="rect" coords="535,318,648,441" />
        </div>
        <!-- 文成县 -->
        <div class="wencheng map_icon" @click="switchmap(7, '文成县', '330328000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[10] }}
            <span>位</span>
          </p>
          <area shape="poly" coords="65,329,108,278,181,276,234,268,266,283,241,341,258,361,216,378,205,410,193,424,176,412,172,379,133,381,107,371,107,338" />
        </div>
        <!-- 瑞安市 -->
        <div class="ruian map_icon" @click="switchmap(8, '瑞安市', '330381000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[7] }}
            <span>位</span>
          </p>
          <area shape="poly" coords="255,340,275,282,324,264,372,275,410,306,442,320,478,325,491,349,455,379,436,354,380,355,355,374" href="#" />
        </div>
        <!-- 平阳县 -->
        <div class="pingyang map_icon" @click="switchmap(9, '平阳县', '330326000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[4] }}
            <span>位</span>
          </p>
          <area shape="poly" coords="222,389,205,431,228,444,295,445,334,434,375,434,431,422,441,398,426,368,391,364,363,387,318,371,279,372" />
        </div>
        <!-- 泰顺县 -->
        <div class="taishun map_icon" @click="switchmap(10, '泰顺县', '330329000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[6] }}
            <span>位</span>
          </p>
          <area shape="poly" coords="65,341,91,350,113,389,164,388,163,417,182,437,184,453,262,498,207,503,185,525,154,514,99,552,62,545,32,487,48,464,19,410,28,364" />
        </div>
        <!-- 苍南县 -->
        <div class="cangnan map_icon" @click="switchmap(11, '苍南县', '330327000000')">
          <p class="font_w4 font_s20">
            {{ this.Hqlrsl[5] }}
            <span>位</span>
          </p>
          <area shape="poly" coords="195,445,287,460,332,446,370,454,389,436,422,435,433,461,455,469,438,515,393,518,388,585,341,585,326,539,315,501,286,509,273,487" />
        </div>
      </map>
    </div>
    <div class="flexC flex1" style="padding: 5rem 3rem;">
      <div class="flex JustifyContentC mapcen_p">
        <div class="flex AlignItemsC">
          <div style="padding-right: 0.5rem;"><img src="@/assets/img/home/datasea/man1.png" alt="" /></div>
          <div class="flexC">
            <p class="colorF font_s16">医生总数</p>
            <p class="font_s22 mapcen_p_a">
              {{ Qyys }}
              <span>人</span>
            </p>
          </div>
        </div>
      </div>
      <div class="flex JustifyContentC mapcen_p">
        <div class="flex AlignItemsC">
          <div style="padding-right: 0.5rem;"><img src="@/assets/img/home/datasea/book.png" alt="" /></div>
          <div class="flexC">
            <p class="colorF font_s16">医生总共单数</p>
            <p class="font_s22 mapcen_p_b">
              {{ ljgd }}
              <span>单</span>
            </p>
          </div>
        </div>
      </div>
      <div class="flex JustifyContentC mapcen_p">
        <div class="flex AlignItemsC">
          <div style="padding-right: 0.5rem;"><img src="@/assets/img/home/datasea/oldMan.png" alt="" /></div>
          <div class="flexC">
            <p class="colorF font_s16">全市建档人数</p>
            <p class="font_s22 mapcen_p_c">
              {{ add }}
              <span>人</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <p class="font_s22 colorF" style="position: absolute; bottom:20%; right: 3%;writing-mode: vertical-lr;opacity: 0.75; font-weight: 400;">老人数量</p>
  </div>
</template>

<script>
export default {
  name: 'mapCen',
  data () {
    return {
      category: false,
      isActive: 1,
      // 医生总共单数
      ljgd: '',
      // 医生总数
      Qyys: '',
      // 服务老人总数
      add: '',
      Hqlrsl: [],
      cityType: '8',
      cityTitle: '',
      cityCode: ''
    }
  },

  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 当然如果你需要带登录信息去请求这个接口 可以在 路由后面跟上 true 或者 false 来决定是否在请求的时候带登录信息
      // 我们这样进行封装 就对一个 请求封装好了。
      // 请求列表数据
      this.$http.post(this.$api.Add.add, true).then(result => {
        this.add = result.data.response.countElderTotal
        // console.log('1.服务老人总数', result.data.response);
      })

      this.$http.post(this.$api.Ljgd.ljgd, true).then(result => {
        this.ljgd = result.data.response.ServiceTotal
        // console.log('2.医生总共单数', result.data.response);
      })
      this.$http.post(this.$api.Qyys.qyys, true).then(result => {
        this.Qyys = result.data.response.TotalDoctor
        // console.log('6. 医生总数', result.data.response);
      })
      // 12.获取老人数量(会按照地区自动分类

      this.$http.post(this.$api.Hqlrsl.hqlrsl, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        console.log('12.获取老人数量(会按照地区自动分类)', arr)
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },

    switchmap (index, cityName, cityCode) {
      this.category = false
      this.isActive = index
      var _this = this
      localStorage.setItem('cityIndex', index)
      localStorage.setItem('cityName', cityName)
      localStorage.setItem('cityCode', cityCode)
      setTimeout(function () {
        _this.$router.push({
          path: 'AreaComponent',
          name: 'AreaComponent',
          params: {
            key: 'key',
            cityTypeKey: index,
            cityTitleKey: cityName,
            cityCodeKey: cityCode
          }
        })
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.mapcen {
  position: absolute;
  top: 8%;
  left: 27.5%;
  height: 87%;
  width: 45%;
  .mapcen_p {
    width: 10rem;
    height: 5.2rem;
    margin-top: 1rem;
    background: url(../../assets/img/home/datasea/border.png) no-repeat;
    background-size: 100% 100%;
    font-weight: 400;
    img {
      width: 2.2rem;
      height: 2.7rem;
    }
    .mapcen_p_a {
      color: #fb9ed8;
    }
    .mapcen_p_b {
      color: #33ebfe;
    }
    .mapcen_p_c {
      color: #ffcc24;
    }
  }

  .map {
    position: absolute;
    bottom: 15%;
    right: 5%;

    .distribution {
      height: 2rem;
      width: 6rem;
      background: url(../../assets/img/home/datasea/radius.png) no-repeat;
      background-size: 100% 100%;
    }
    .map_icon {
      color: #214494;
      font-style: italic;
      width: 7rem;
      height: 7rem;
      line-height: 2.4rem;
      text-align: center;
      background: url(../../assets/img/home/2.png) no-repeat center;
      background-size: 100% 100%;
      :hover{
      color: #fff;
      font-size: 1.375rem;
      }
    }
    .yongjia {
      position: absolute;
      top: 0%;
      left: 60%;
    }

    .yueqing {
      position: absolute;
      top: 10%;
      left: 78%;
    }

    .lucheng {
      position: absolute;
      top: 17%;
      left: 43%;
    }

    .ouhai {
      position: absolute;
      top: 30%;
      left: 54%;
    }

    .longwan {
      position: absolute;
      top: 30%;
      left: 70%;
    }

    .dongtou {
      position: absolute;
      top: 52%;
      left: 80%;
    }

    .wencheng {
      position: absolute;
      top: 45%;
      left: 19%;
    }

    .ruian {
      position: absolute;
      top: 35%;
      left: 38%;
    }
    .p_ruian {
      position: absolute;
      top: 52.5%;
      left: 45%;
    }
    .pingyang {
      position: absolute;
      top: 52%;
      left: 51%;
    }

    .taishun {
      position: absolute;
      top: 65%;
      left: 7%;
    }
    .cangnan {
      position: absolute;
      top: 73%;
      left: 44%;
    }
  }
}
</style>
